<template>
  <div class="Apply_bj">
    <div class="flexC">
      <div class="flex">
        <ul class="Inv_ul flex AlignItemsC colorF font_s24  Bold">
          <li @click="categoryFun(1)" :class="{ category: category === 1 }" class="flexC JustifyContentFE flex2 textC cursor"><p>两会提案(累计)</p></li>
        </ul>
      </div>
      <div class="flexC" style="padding:0rem 4.0625rem 2.25rem 4.0625rem;">
        <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s20  Bold" v-if="category === 1">
          <li class="flex1 textC">序号</li>
          <li class="flex2 textC">意见/提案</li>
          <li class="flex2 textC">编号</li>
          <li class="flex2 textC">代表/委员</li>
          <li class="flex5 textC">摘要</li>
          <li class="flex5 textC">办理结果</li>
          <li class="flex2 textC">反馈意见</li>
        </ul>
        <div style="height: 54vh;" class="superviseList font_s18">
          <ul v-for="(item, index) in arr1" class="Inv_ulb flex colorF Bold textC" :key="'list' + index" v-if="category === 1">
            <li class="flex1 textC">{{ index+1 }}</li>
            <li class="flex2 textC">{{ item.a }}</li>
            <li class="flex2 textC">{{ item.b }}</li>
            <li class="flex2 textC">{{ item.c }}</li>
            <li class="flex5 textC">{{ item.d }}</li>
            <li class="flex5 textC">{{ item.e }}</li>
            <li class="flex2 textC">{{ item.f }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComLfet',

  data () {
    return {
      category: 1,
      arr1: [
        {
          a: '提案',
          b: '政协022',
          c: '孙万驹',
          d: '筹资方式单一、服务内容过于偏向生活护理、专业评估人员占比少',
          e: '所提问题因目前条件限制或其他原因有待以后研究解决。',
          f: ''
        }

      ]
    }
  },
  methods: {
    categoryFun (index) {
      this.category = index
    }
  }
}
</script>

<style lang="scss" scoped>
.Apply_bj {
  width: 100%;
  height: 100%;
  .Inv_ul {
    width: 89.375rem;
    height: 4.375rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    margin: 1.285rem auto 0.825rem;
  }
  .Inv_ula {
    width: 88.99rem;
    height: 4.375rem;

    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
    li{
       padding: 1rem;
    }
  }
  .Inv_ulb {
    font-weight: bold;
    width: 89.375rem;
    height: 3.75rem;
    overflow: hidden;
    li {
      padding: 1rem;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
